﻿<template id="layout_page_template">
    <div class="layout-page" v-loading="loading">
        <div class="layout-page-component">
            <template v-for="key in Object.keys(components)" :key="key">
                <component v-show="key==name" :is="components[key]" :src="src"></component>
            </template>
        </div>
    </div>
</template>
<script type="text/javascript">
    var layout_page = {
        template: "#layout_page_template",
        data() {
            return {
                loading: false,
                components: {},
                name: null,
                src: null
            }
        },
        methods: {
            loadPage(name, id, type, src, refresh) {
                this.name = name;
                this.src = src;
                if (!this.components[name] || refresh) {
                    switch (type) {
                        case "href": this.loadHref(name, id); break;
                        case "iframe": this.loadIframe(name); break;
                        default: break;
                    }
                    console.info(`load ${type}: ${src}`);
                }

            },
            loadHref(name, id) {
                var that = this;
                app.func.ajax({
                    url: that.src,
                    data: { _mid: id },
                    dataType: "text",
                    cache: false,
                    beforeSend() {
                        app.that.loading = that.loading = true;
                    },
                    complete() {
                        app.that.loading = that.loading = false;
                    },
                    success(result) {
                        try {
                            var htmlBox = $(".layout-page-html");
                            var src = that.src, qIndex = src.indexOf('?');
                            if (qIndex != -1) { src = src.substring(0, qIndex); }
                            var compName = src.substring(1).replace(/\//g, "_");
                            htmlBox.html(result);
                            that.$nextTick(() => {
                                that.components[name] = Vue.markRaw(eval(compName));
                                that.$nextTick(() => { htmlBox.empty(); });
                            });
                            that.$emit("loaded", { id, name, src: that.src });
                        }
                        catch (err) {
                            that.$emit("error", name);
                            app.func.error("页面加载错误，请检查地址是否正确");
                            console.error(err);
                        }
                    },
                    error() { that.$emit("error", name); }
                });
            },
            loadIframe(name) {
                this.components[name] = Vue.markRaw(layout_page_iframe);
            },
            deleteComponent(name) {
                if (this.components[name]) { delete this.components[name]; }
            }
        },
        mounted() { }
    };
</script>